<template>
	<view class="group">
		<uni-tabchange :tabArr="tabArr" :activeTab="activeTab" @tabChangeSuccess="tabChangeSuccess"></uni-tabchange>
		<!-- 小组 -->
		<view class="groupList flex justConBetween" v-if="activeTab<3">
			<view class="leftBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2==0">
						<uni-mygroup :groupItem="item" :canAdd="false" :canActivity="activeTab==0?true:false"></uni-mygroup>
					</view>
				</template>
			</view>
			<view class="rightBox">
				<template v-for="(item,index) in groupData">
					<view class="groupOne" :key="index" v-if="index%2!=0">
						<uni-mygroup :groupItem="item" :canAdd="false" :canActivity="activeTab==0?true:false"></uni-mygroup>
					</view>
				</template>
			</view>
		</view>
		<!-- 群 -->
		<view class="groupList flex justConBetween" v-if="activeTab==3">
			<view class="leftBox">
				<template v-for="(item,index) in qqData">
					<view class="groupOne" :key="index" v-if="index%2==0">
						<view class="groupItem">
							<view class="bg">
								<view class="cover">
									<image :src="item.codeUrl" mode="widthFix"></image>
								</view>
								<view class="bgMain flex alignCenter">
									<view class="flex alignCenter justConBetween smallOper">
										<image src="@/static/image/icons/scan.png" mode="widthFix" @click.stop="showScan(item.codeUrl)"></image>
										<!-- <i class="iconfont icon-lajitong delete" @click.stop="operQQ('del',item)"></i> -->
										<uni-icons type="trash" color="#fff" size="18" @click="operQQ('del',item)"></uni-icons>
									</view>
									<view class="oper font12 colorMain">
										<view @click.stop="operQQ('edit',item)"><i class="iconfont icon-bianji focusMargin"></i>编辑</view>
									</view>
									<view class="qqNum" @click.stop="copyClick(item.userGroupNo)">
										<text class="font14 bold focusMargin">{{item.userGroupNo}}</text>
										<image src="@/static/image/icons/copy.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="con font14">
								<view class="title hiddenOneline">{{item.userGroupName}}</view>
								<!-- <view class="qqNum hiddenOneline">{{item.userGroupNo}}</view> -->
								<view class="qqIntro font12 color666 hiddenOneline">{{item.userGroupIntroduction}}</view>
								<view class="tag colorBlue font12 flex alignCenter flexWrap">
									<text>{{item.schoolName}}</text>
									<text>{{item.majorName}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<view class="rightBox">
				<template v-for="(item,index) in qqData">
					<view class="groupOne" :key="index" v-if="index%2!=0">
						<view class="groupItem">
							<view class="bg">
								<view class="cover">
									<image :src="item.codeUrl" mode="widthFix"></image>
								</view>
								<view class="bgMain flex alignCenter">
									<view class="flex alignCenter justConBetween smallOper">
										<image src="@/static/image/icons/scan.png" mode="widthFix" @click.stop="showScan(item.codeUrl)"></image>
										<!-- <i class="iconfont icon-lajitong delete" @click.stop="operQQ('del',item)"></i> -->
										<uni-icons type="trash" color="#fff" size="18" @click="operQQ('del',item)"></uni-icons>
									</view>
									<view class="oper font12 colorMain">
										<view @click.stop="operQQ('edit',item)"><i class="iconfont icon-bianji focusMargin"></i>编辑</view>
									</view>
									<view class="qqNum" @click.stop="copyClick(item.userGroupNo)">
										<text class="font14 bold focusMargin">{{item.userGroupNo}}</text>
										<image src="@/static/image/icons/copy.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
							<view class="con font14">
								<view class="title hiddenOneline">{{item.userGroupName}}</view>
								<view class="tag colorBlue font12 flex alignCenter flexWrap">
									<text>{{item.schoolName}}</text>
									<text>{{item.majorName}}</text>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
		<uni-nodata v-if="(groupData.length==0 && qqData.length==0)"></uni-nodata>
		<view class="fixedBottomBtn" v-if="activeTab==0" @click="toAdd('group')"><text class="focusMargin">+</text>创建小组</view>
		<view class="fixedBottomBtn" v-if="activeTab==3" @click="toAdd('qq')"><text class="focusMargin">+</text>创建群</view>
	</view>
</template>

<script>
	import { myGroup,myQQ } from "@/api/mine.js"
	import { delQQ } from "@/api/send.js"
	import { previewImg } from "@/utils/common.js"
	export default {
		data() {
			return {
				activeTab:0,
				tabArr:[{
					title:'我管理的'
				},{
					title:'我参与的'
				},{
					title:'我收藏的'
				}
				,{
					title:'我的群'
				},
				],
				groupData:[],
				page:1,
				pageSize:20,
				pageTotal:0,
				qqData:[]
			};
		},
		onLoad(option){
			console.log("option",option)
			this.activeTab=(option.activeTab?option.activeTab:0)
		},
		onShow() {
			this.initPage()
			if(this.activeTab<3){
				this.getList()
			}else{
				this.getQQList()
			}
			
		},
		methods:{
			initPage(){
				this.page=1;
				this.groupData=[];
				this.qqData=[];
			},
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
					myTeamsType:Number(this.activeTab)+1,// 0:全部; 1:我管理的; 2:我参与的; 3我收藏的
				}
				myGroup(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						this.groupData=this.groupData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			// 群列表
			getQQList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let param={
					page:this.page,
					size:this.pageSize,
				}
				myQQ(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						this.qqData=this.qqData.concat(res.data.rows)
						this.pageTotal=Math.ceil(res.data.total/this.pageSize)
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			tabChangeSuccess(val){
				this.activeTab=val.activeTab
				this.initPage()
				if(this.activeTab<3){
					this.getList()
				}else{
					this.getQQList()
				}
			},
			// 创建小组和群
			toAdd(type){
				if(type=='group'){
					uni.navigateTo({
						url:'/pages/send/group/group'
					})
				}else{
					uni.navigateTo({
						url:'/settingPages/pages/qq/qq'
					})
				}
				
			},
			operQQ(type,item){
				if(type=='edit'){
					uni.navigateTo({
						url:'/settingPages/pages/qq/qq?id='+item.id
					})
				}else{
					uni.showModal({
						title: '提示',
						content: '是否确定删除该群？',
						success: (res)=> {
							if (res.confirm) {
								delQQ({id:item.id}).then((res2)=>{
									if(res2.code==100000){
										this.initPage()
										this.getQQList()
									}
								})
							}
						}
					});
				}
			},
			copyClick(qq){
				uni.setClipboardData({
					data: qq,
					showToast:false,
					success: ()=> {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			// 查看qq群二维码
			showScan(url){
				previewImg([url],0)
			}
		},
		onPullDownRefresh() {
			this.initPage()
			if(this.activeTab<3){
				this.getList()
			}else{
				this.getQQList()
			}
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},1000)
		},
		onReachBottom() {
			if(this.page<this.pageTotal){
				++this.page
				if(this.activeTab<3){
					this.getList()
				}else{
					this.getQQList()
				}
			}else{
				uni.showToast({
					title:'我也是有底线的',
					icon:'none'
				})
			}
		}
	}
</script>
<style lang="scss">
@import "@/static/public.scss";	
page{
	background-color:$pageBgColor;
}
</style>
<style lang="scss" scoped>
.group{
	padding:0 0 120rpx;
	box-sizing: border-box;
}
.groupList{
	flex-wrap: wrap;
	padding: 30rpx;
	box-sizing: border-box;
	&>view{
		flex: 0 0 48%;
	}
	.groupOne{
		margin-bottom: 30rpx;
		border-radius:8rpx;
	}
}
.groupItem{
	background: #fff;
	border-radius: 8rpx;
	position: relative;
	.bg{
		position: relative;
		border-radius: 8rpx 8rpx 0 0;
		.cover{
			overflow: hidden;
			&>image{
				width:100%;
				height:100%;
				display: block;
				border-radius: 8rpx 8rpx 0 0;
			}
		}
		.bgMain{
			border-radius: 8rpx 8rpx 0 0;
			position: absolute;
			height: 100%;
			width: 100%;
			top: 0;
			left:0;
			background: rgba(0, 0, 0, .2);
			.oper{
				width: 100%;
				text-align: center;
				&>view{
					display: inline-block;
					background: rgba(0, 0, 0, .4);
					border-radius: 30rpx;
					padding: 6rpx 20rpx;
					margin: 0 10rpx;
				}
			}
			.qqNum{
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(to top,rgba(0, 0, 0, .5) 20%,rgba(0, 0, 0, 0));
				color: #fff;
				text-align: center;
				width: 100%;
				padding: 10rpx 0;
				text{
					display: inline-block;
					vertical-align: middle;
				}
				image{
					width: 50rpx;
					height: 50rpx;
					display: inline-block;
					vertical-align: middle;
				}
			}
		}
		.smallOper{
			position: absolute;
			top:0;
			left:0;
			width: 100%;
			padding: 0 10rpx;
			box-sizing: border-box;
			overflow: hidden;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
	.con{
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 0 0 8rpx 8rpx;
		border:1px solid $bordercolor;
		.tag{
			margin: 10rpx 0;
			&>text{
				display: inline-block;
				margin:0 10rpx 0 0;
			}
		}
	}
}
</style>
